$(function () {
  // 菜单导航特效
  $('.cate-content').on('mouseenter', '.nav-li', function () {
      $('.cat2').show()

      let index = $(this).index()
      $('.cat2>div').hide()
      $('.cat2>div').eq(index).show()
  })
  $('.cate-content').on('mouseleave', function () {
      $('.cat2').hide()
      $('.cat2>div').hide()
  })
   // ### 菜单导航图标
let icons = [
  "icon-canju",
  "icon-meituan",
  "icon-jiudian",
  "icon-jiudian",
  "icon-dianying-",
  "icon-feiji",
  "icon-maikefeng",
  "icon-icon",
  "icon-chuitoufa",
  "icon-qinzi2",
  "icon-gangling",
  "icon-pinleitubiao_jiazhuangjiancai",
  "icon-xuexi",
  "icon-zhuanshi",
  "icon-tubiao_-",
  "icon-jiubajiulang",
];

  // ### 菜单导航数据
$.get(
  "/api/cate/tree.jsp",
  {},
  (res) => {
    // ### 一级
    // console.log(res.data);
    // 1 定义变量存放HTML数据
    let html = "";
    // 2 遍历拼接
    $.each(res.data, (index, item) => {
      // 2.1 过滤
      let url = item.url || `./waimai.html?cat_id=${item.cat_id}`;
      // 2.2 拼接
      html += `<li class="nav-li">
      <i class="iconfont ${icons[index]}"></i>
      <span class="nav-text-wrapper"></span>
      <a href="${url}" class="link nav-text" >${
        item.cat_name
      }</a>
      ${
        item.cat_name === "外卖"
          ? '<span class="nav-promotion">HOT</span>'
          : ""
      }
      <i class="nav-right-arrow"></i>
    </li>`;
    });
    // 3 追加到页面
    $(".cat1 ul").html(html);

    // ### 二级、三级
    $(".cat2").text(""); // 清空
    $.each(res.data, (index, item) => {
      // 定义变量存放数据

      // 二级（一的子）
      let twoHtml = "";
      $.each(item.children, (twoIndex, twoItem) => {
        // 三级（二的子）
        let threeHtml = "";
        $.each(twoItem.children, (threeIndex, threeItem) => {
          threeHtml += `<a href="./waimai.html?cat_id=${threeItem.cat_id}" class="link detail-text" >${threeItem.cat_name}</a>`;
        });

        // 二的内容
        let url = twoItem.url || `./waimai.html?cat_id=${twoItem.cat_id}`;
        twoHtml += `<!-- 二级 content 每个二级盒子里面有n个二级内容 -->
      <div class="detail-area">
        <div class="detail-title-wrapper clearfix">
          <h2>
            <a href="${url}" class="link detail-title" >${twoItem.cat_name}</a>
          </h2>
          <a href="${url}" class="link detail-more" >更多<i class="detail-right-arrow"></i></a>
        </div>

        <!-- 三级 -->
        <div class="detail-content">
          ${threeHtml}
        </div>
        <!-- 三级 -->
      </div>
      <!-- 二级 content 每个二级盒子里面有n个二级内容 -->`;
      });

      // 进一步遍历
      let oneHtml = `
    <!-- 二级 box 每个一级仅一个二级盒子  -->
    <div class="category-nav-detail">
      ${twoHtml || '<img src="./imgs/cate404.webp" /> '}
    </div>
    <!-- 二级 box 每个一级仅一个二级盒子 -->`;

      // 追加
      $(".cat2").append(oneHtml);
    });
  },
  "json"
);
 
   
})
